<script type="text/javascript" src="<?=base_url()?>/js/jquery.dataTables.min.js"></script>
<div class="ui-widget-content ui-corner-all">
	<h3 class="ui-widget-header widget-header ui-corner-all">Training Plan 2012</h3>
	<div class="input-information">
		<div class="department">
			<span>Department:</span>
			<select class="department-select">
				<option>All</option>
				<option>CB</option>
				<option>Tetra park</option>
				<option>AM</option>
				<option>R&D</option>
				<option>QC</option>
				<option>Engineering</option>
				<option>Ultility</option>
				<option>Lad Line</option>
				<option>Processing</option>
				<option>FINO</option>
				<option>Milk Collection</option>
			</select>
		</div>
	</div>
	<div class="widget-content ui-helper-clearfix">
		<nav>
		<table class="training-plan display ui-widget-content ui-helper-reset">
			<thead>
				<tr>
					<th>No</th>
					<th>Courses</th>
					<th>Target Level</th>
					<th>Target Group</th>
					<th>Number of Trainees</th>
					<th>Hours of person</th>
					<th>Trainner</th>
					<th>When to execute</th>
					<th>Status</th>
				</tr>
				<tfoot>
					<th>No</th>
					<th>Courses</th>
					<th>Level</th>
					<th>Target Group</th>
					<th>Number of Trainees</th>
					<th>Hours of person</th>
					<th>Trainner</th>
					<th>When to execute</th>
					<th>Status</th>
				</tfoot>
			</thead>
			<tbody>
				<tr>
					<td class="center">1</td>
					<td><a href="<?=base_url()?>index.php/home/plan_course_detail/">Meeting Management</a></td>
					<td class="center">2</td>
					<td>WCOM Facilitator</td>
					<td class="center">4</td>
					<td class="center">10</td>
					<td>External</td>
					<td class="center">Feb, Aug</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">2</td>
					<td><a href="#">Blue Print</a></td>
					<td class="center">2</td>
					<td>WCOM Facilitator</td>
					<td class="center">9</td>
					<td class="center">9</td>
					<td>External</td>
					<td class="center">Feb</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">3</td>
					<td><a href="#">CI Auditor Training</a></td>
					<td class="center">2</td>
					<td>PCS/pillar member</td>
					<td class="center">7</td>
					<td class="center">25</td>
					<td>Internal</td>
					<td class="center">July</td>
					<td>Canceled</td>
				</tr>
				<tr>
					<td class="center">4</td>
					<td><a href="#">Process Kaizen Manager</a></td>
					<td class="center">3</td>
					<td>pillar leader</td>
					<td class="center">20</td>
					<td class="center">17</td>
					<td>External</td>
					<td class="center">Apr</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">5</td>
					<td><a href="#">Baseic electrical - TP Filling Machine</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">15</td>
					<td class="center">13</td>
					<td>External</td>
					<td class="center">May</td>
					<td>Planned</td>
				</tr>
				<tr>
					<td class="center">6</td>
					<td><a href="#">Design Correction</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">14</td>
					<td class="center">27</td>
					<td>External</td>
					<td class="center">May</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">7</td>
					<td><a href="#">A3 Speed electrical</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">12</td>
					<td class="center">11</td>
					<td>External</td>
					<td class="center">May, Jun</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">8</td>
					<td><a href="#">Maintance System</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">7</td>
					<td class="center">25</td>
					<td>External</td>
					<td class="center">July</td>
					<td>Planned</td>
				</tr>
				<tr>
					<td class="center">9</td>
					<td><a href="#">Machanical 2</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">7</td>
					<td class="center">11</td>
					<td>External</td>
					<td class="center">July</td>
					<td>Executed</td>
				</tr>
				<tr>
					<td class="center">10</td>
					<td><a href="#">Machanical 3</a></td>
					<td class="center">2</td>
					<td>in-line technician</td>
					<td class="center">8</td>
					<td class="center">16</td>
					<td>External</td>
					<td class="center">Aug</td>
					<td>Executed</td>
				</tr>
			</tbody>
		</table>
		</nav>
	</div>
</div>
<script type="text/javascript">
	$('.training-plan').dataTable({
		"bLengthChange": false,
        "sScrollY": "380",
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 100,
        "whitespace": "nowrap",
        "sDom": '<"toolbar">frtip',
        "aoColumns":[
        	{"sWidth": '5%'},
        	{"sWidth": '30%'},
        	null,
        	{"sWidth": '15%'},
        	{"sWidth": '5%'},
        	{"sWidth": '10%'},
        	{"sWidth": '10%'},
        	{"sWidth": '10%', "bSortable": false},
        	{"sWidth": '5%'}
        ]
    });

    $(".training-plan tbody tr").each(function(){
    	$(this).mouseover(function(){
    		$(this).addClass("ui-state-active");
    	}).mouseout(function(){
    		$(this).removeClass("ui-state-active");
    	});
    });

    $(".input-information").appendTo(".toolbar");

    $(".progress").progressbar({
    	value : 50
    });

</script>